<script setup lang="ts">
import { message } from 'ant-design-vue';

interface Props {
  visible: boolean;
  customer?: any;
}

interface Emits {
  (e: 'update:visible',value: boolean): void
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 方法
const refreshQR = () => {
  message.success('二维码已刷新');
};

const downloadQR = () => {
  message.success('二维码已下载');
};

const sendToCustomer = () => {
  if (!props.customer) {
    message.warning('请先选择顾客');
    return;
  }
  message.success(`已发送二维码给顾客 ${props.customer.name}`);
};

const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<template>
  <a-modal
    :open="visible"
    title="顾客扫码关注 即可开启线上会员"
    width="600px"
    @cancel="handleCancel"
    :footer="null"
  >
    <div class="wechat-qr-modal">
      <div class="content-wrapper">
        <!-- 左侧：功能介绍 -->
        <div class="features-section">
          <h3>关注微信公众号，享受更多服务</h3>

          <div class="feature-list">
            <div class="feature-item enabled">
              <div class="feature-icon">✅</div>
              <div class="feature-content">
                <div class="feature-title">接收电子消费单</div>
                <div class="feature-desc">实时接收消费明细和电子单据</div>
              </div>
            </div>

            <div class="feature-item enabled">
              <div class="feature-icon">✅</div>
              <div class="feature-content">
                <div class="feature-title">接收预约提醒</div>
                <div class="feature-desc">及时接收预约确认和提醒通知</div>
              </div>
            </div>

            <div class="feature-item enabled">
              <div class="feature-icon">✅</div>
              <div class="feature-content">
                <div class="feature-title">线下会员可接收会员卡余额信息</div>
                <div class="feature-desc">实时查看会员卡余额和消费记录</div>
              </div>
            </div>

            <div class="feature-item coming-soon">
              <div class="feature-icon">⏳</div>
              <div class="feature-content">
                <div class="feature-title">查看电子病历</div>
                <div class="feature-desc">即将上线</div>
              </div>
            </div>

            <div class="feature-item coming-soon">
              <div class="feature-icon">⏳</div>
              <div class="feature-content">
                <div class="feature-title">微信预约</div>
                <div class="feature-desc">即将上线</div>
              </div>
            </div>

            <div class="feature-item coming-soon">
              <div class="feature-icon">⏳</div>
              <div class="feature-content">
                <div class="feature-title">在线问诊</div>
                <div class="feature-desc">即将上线</div>
              </div>
            </div>
          </div>

          <div class="footer-text">
            请让顾客扫码，立即获得免费顾客专属微信服务系统
          </div>
        </div>

        <!-- 右侧：二维码 -->
        <div class="qr-section">
          <div class="qr-code">
            <div class="qr-placeholder">
              <div class="qr-icon">📱</div>
              <div class="qr-text">微信二维码</div>
            </div>
          </div>
          <div class="qr-tip">扫描二维码关注公众号</div>
        </div>
      </div>

      <!-- 底部操作 -->
      <div class="bottom-actions">
        <a-space>
          <a-button @click="refreshQR">刷新二维码</a-button>
          <a-button @click="downloadQR">下载二维码</a-button>
          <a-button type="primary" @click="sendToCustomer">发送给顾客</a-button>
        </a-space>
      </div>
    </div>
  </a-modal>
</template>

<style scoped>
.wechat-qr-modal {
  padding: 16px 0;
}

.content-wrapper {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.features-section {
  flex: 1;
}

.features-section h3 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s;
}

.feature-item.enabled {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

.feature-item.coming-soon {
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  opacity: 0.7;
}

.feature-icon {
  margin-top: 2px;
  font-size: 20px;
}

.feature-content {
  flex: 1;
}

.feature-title {
  margin-bottom: 4px;
  font-weight: 600;
  color: #262626;
}

.feature-desc {
  font-size: 12px;
  color: #666;
}

.footer-text {
  padding: 12px;
  margin-top: 16px;
  font-size: 14px;
  color: #1890ff;
  text-align: center;
  background: #e6f7ff;
  border-radius: 6px;
}

.qr-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.qr-code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background: #fafafa;
  border: 2px solid #d9d9d9;
  border-radius: 8px;
}

.qr-placeholder {
  text-align: center;
}

.qr-icon {
  margin-bottom: 8px;
  font-size: 48px;
}

.qr-text {
  font-size: 14px;
  color: #666;
}

.qr-tip {
  font-size: 12px;
  color: #999;
  text-align: center;
}

.bottom-actions {
  padding-top: 16px;
  text-align: center;
  border-top: 1px solid #f0f0f0;
}

:deep(.ant-modal-body) {
  padding: 24px;
}
</style>
